<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TITLE>VLC Plugin test page</TITLE>
<STYLE>
  .inputTrackerInput {
        height:20;
        width:30;
        font-family : Arial, Helvetica, sans-serif;
        font-size : 12px;
  }
</STYLE>

<SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/lib/LibCrossBrowser.js"></SCRIPT>
<SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/lib/EventHandler.js"></SCRIPT>
<SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/core/form/Bs_FormUtil.lib.js"></SCRIPT>
<SCRIPT type="text/javascript" src="blueshoes-4.5/javascript/components/slider/Bs_Slider.class.js"></SCRIPT>

<SCRIPT language="JavaScript"><!--
function init()
{
    inputTracker = new Bs_Slider();
    if (inputTracker)
    {
        inputTracker.attachOnChange(onInputTrackerChange);
        inputTracker.attachOnSlideStart(onInputTrackerScrollStart);
        inputTracker.attachOnSlideEnd(onInputTrackerScrollEnd);
        inputTracker.width         = 530 ;
        inputTracker.height        = 15;
        inputTracker.minVal        = 0;
        inputTracker.maxVal        = 1.0;
        inputTracker.valueDefault  = 0;
        inputTracker.valueInterval = 1/530;
        inputTracker.setDisabled(true);
        inputTracker.imgDir   = 'blueshoes-4.5/javascript/components/slider/img/';
        inputTracker.setBackgroundImage('aluminumalloyvolcanic/horizontal_background.gif', 'repeat');
        inputTracker.setArrowIconLeft('aluminumalloyvolcanic/horizontal_backgroundLeft.gif', 2, 19);
        inputTracker.setArrowIconRight('aluminumalloyvolcanic/horizontal_backgroundRight.gif', 2, 19);
        inputTracker.setSliderIcon('aluminumalloyvolcanic/horizontal_knob.gif', 15, 19);
        inputTracker.useInputField = 0;
        inputTracker.draw('inputTrackerDiv');
    }

    if( navigator.appName.indexOf("Microsoft Internet")==-1 )
    {
        onVLCPluginReady()
    }
    else if( document.readyState == 'complete' )
    {
        onVLCPluginReady();
    }
    else
    {
        /* Explorer loads plugins asynchronously */
        document.onreadystatechange=function()
        {
            if( document.readyState == 'complete' )
            {
                onVLCPluginReady();
            }
        }
    }
}

function getVLC(name)
{
    if (window.document[name])
    {
        return window.document[name];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1)
    {
        if (document.embeds && document.embeds[name])
            return document.embeds[name];
    }
    else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
    {
        return document.getElementById(name);
    }
}

function onVLCPluginReady()
{
    updateVolume(0);
}

//--></SCRIPT>

<BODY onLoad="init();">
<TABLE>
<TR><TD colspan="2">
MRL:
<INPUT size="90" id="targetTextField" value="">
<INPUT type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
<INPUT type=submit value="Add" onClick="doAdd(document.getElementById('targetTextField').value);">
</TD></TR>
<TR><TD align="center" colspan="2">
<!--
Insert VideoLAN.VLCPlugin.2
-->
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        width="640"
        height="480"
        id="vlc"
        events="True">
<param name="MRL" value="" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="False" />
<param name="Volume" value="50" />
<param name="toolbar" value="true" />
<param name="StartTime" value="0" />
<EMBED pluginspage="http://www.videolan.org"
       type="application/x-vlc-plugin"
       version="VideoLAN.VLCPlugin.2"
       width="640"
       height="480"
       toolbar="true"
       name="vlc">
</EMBED>
</OBJECT>
</TD></TR>
<TR><TD colspan="2">
<TABLE><TR>
<TD valign="top" width="550">
<!--
Insert Slider widget
-->
<DIV id="inputTrackerDiv"</DIV>
</TD><TD width="15%">
<DIV id="info" style="text-align:center">-:--:--/-:--:--</DIV>
<DIV id="state" style="text-align:center">Stopped...</DIV>
</TD></TR></TABLE>
</TD></TR>
<TR><TD>
<INPUT type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
<INPUT type=button value="Stop" onClick='doStop();'>
&nbsp;
<INPUT type=button value=" << " onClick='doPlaySlower();'>
<INPUT type=button value="Reverse" onClick='doReverse();'>
<INPUT type=button value=" >> " onClick='doPlayFaster();'>
&nbsp;
<INPUT type=button value="Fullscreen" onClick='getVLC("vlc").video.toggleFullscreen();'>
<INPUT type=button value="Version" onClick='alert("vlc " + getVLC("vlc").VersionInfo);'>
<INPUT type=button value=" State " onClick='alert("state: " + getVLC("vlc").input.state);'>
</TD><TD align="right">
<SPAN style="text-align:center">Volume:</SPAN>
<INPUT type=button value=" - " onClick='updateVolume(-10)'>
<SPAN id="volumeTextField" style="text-align:center">--</SPAN>
<INPUT type=button value=" + " onClick='updateVolume(+10)'>
<INPUT type=button value="Mute" onClick='getVLC("vlc").audio.toggleMute();'>
</TD>
</TR>
<TR><TD>Playlist:
<INPUT type=button value="Prev" onClick='getVLC("vlc").playlist.prev();'>
<INPUT type=button value="Next" onClick='getVLC("vlc").playlist.next();'>
<INPUT type=button value="Clear All" onClick='doPlaylistClearAll();'>
    Aspect Ratio:
    <SELECT readonly onChange='doAspectRatio(this.value)'>
      <OPTION value="default">Default</OPTION>
      <OPTION value="1:1">1:1</OPTION>
      <OPTION value="4:3">4:3</OPTION>
      <OPTION value="16:9">16:9</OPTION>
      <OPTION value="221:100">221:100</OPTION>
      <OPTION value="5:4">5:4</OPTION>
    </SELECT>
</TD><TD align="right">
<INPUT type=button id="itemCount" value=" Items 0 " onClick='doItemCount();'>
<INPUT size=4 value="" id="removeid"><INPUT type=submit value="Delete" onClick="doRemoveItem(document.getElementById('removeid').value);">
</TD>
</TR>
<TR><TD>Audio Channel:
  <SELECT readonly onClick='doAudioChannel(this.value);'>
    <OPTION value=1>Stereo</OPTION>
    <OPTION value=2>Reverse Stereo</OPTION>
    <OPTION value=3>Left</OPTION>
    <OPTION value=4>Right</OPTION>
    <OPTION value=5>Dolby</OPTION>
  </SELECT>
</TD>
<TD>
<INPUT type=button value="current channel" onClick='alert(getVLC("vlc").audio.channel);'>
</TD>
</TR>
<TR><TD> Audio Track:
<INPUT type=button value=" + " onClick='doAudioTrack(1);'>
<SPAN id="trackTextField" style="text-align:center">--</SPAN>
<INPUT type=button value=" - " onClick='doAudioTrack(-1);'>
</TD>
<TD>
<INPUT type=button value="set slider" onClick='doSetSlider();'>
<INPUT type=button value="get position" onClick='doGetPosition();'>
</TD>
</TR>
<TR>
<TD>Video Subtitle:
    <INPUT type=button value=" + " onClick='doSubtitle(1);'>
    <SPAN id="spuTextField" style="text-align:center">--</SPAN>
    <INPUT type=button value=" - " onClick='doSubtitle(-1);'>
</TD>
</TR>
<TR>
<TD>
    <INPUT type=button id="telx" value="Teletext off" onClick='doToggleTeletext();'>
    Teletext page:
    <INPUT size=4 value="100" id="telxPage" onClick='doTelxPage(document.getElementById("telxPage").value);'>
</TD>
</TR>
</TABLE>
<SCRIPT language="javascript">
<!--

var rate = 0;
var prevState = 0;
var monitorTimerId = 0;
var inputTracker;
var inputTrackerScrolling = false;
var inputTrackerIgnoreChange = false;
var telxState = false;

function doSetSlider()
{
    var vlc = getVLC("vlc");

    // set slider to new position
    if( vlc )
        vlc.input.time = (vlc.input.length/2);
}

function doGetPosition()
{
    var vlc = getVLC("vlc");

    // set slider to new position
    if (vlc)
        alert( "position is " + vlc.input.time);
}

function doReverse(rate)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = -1.0 * vlc.input.rate;
}

function doAudioChannel(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.audio.channel = parseInt(value);
}

function doAudioTrack(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.audio.track = vlc.audio.track + value;
        document.getElementById("trackTextField").innerHTML = vlc.audio.track;
    }
}

function doAspectRatio(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.video.aspectRatio = value;
}

function doSubtitle(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.video.subtitle = vlc.video.subtitle + value;
        document.getElementById("spuTextField").innerHTML = vlc.video.subtitle;
    }
}

function doTelxPage(value)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.video.teletext = parseInt(value);
}

function doToggleTeletext()
{
    var vlc = getVLC("vlc");

    if( vlc )
    {
        vlc.video.toggleTeletext();
        if (telxState)
        {
            document.getElementById("telx").innerHTML = "Teletext on";
            telxState = true;
        }
        else
        {
            document.getElementById("telx").innerHTML = "Teletext off";
            telxState = false;
        }
    }
}

function doItemCount()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        var count = vlc.playlist.items.count;
        document.getElementById("itemCount").value = " Items " + count + " ";
    }
}

function doRemoveItem(item)
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.playlist.items.remove(item);
}

function doPlaylistClearAll()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.playlist.items.clear();
        while( vlc.playlist.items.count > 0)
        {
            // wait till playlist empties.
        }
        doItemCount();
    }
}

function updateVolume(deltaVol)
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        vlc.audio.volume += deltaVol;
        document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
    }
}

function formatTime(timeVal)
{
    if( typeof timeVal != 'number' )
        return "-:--:--";

    var timeHour = Math.round(timeVal / 1000);
    var timeSec = timeHour % 60;
    if( timeSec < 10 )
        timeSec = '0'+timeSec;
    timeHour = (timeHour - timeSec)/60;
    var timeMin = timeHour % 60;
    if( timeMin < 10 )
        timeMin = '0'+timeMin;
    timeHour = (timeHour - timeMin)/60;
    if( timeHour > 0 )
        return timeHour+":"+timeMin+":"+timeSec;
    else
        return timeMin+":"+timeSec;
}

function doState()
{
    var vlc = getVLC("vlc");
    var newState = 0;

    if( vlc )
        newState = vlc.input.state;

    if( newState == 0 )
    {
        // current media has stopped
        onEnd();
    }
    else if( newState == 1 )
    {
        // current media is openning/connecting
        onOpen();
    }
    else if( newState == 2 )
    {
        // current media is buffering data
        onBuffer();
    }
    else if( newState == 3 )
    {
        // current media is now playing
        onPlay();
    }
    else if( newState == 4 )
    {
        // current media is now paused
        onPause();
    }
    else if( newState == 5 )
    {
        // current media has stopped
        onStop();
    }
    else if( newState == 6 )
    {
        // current media has ended
        onEnd();
    }
    else if( newState == 7 )
    {
        // current media encountered error
        onError();
    }
}

function monitor()
{
    var vlc = getVLC("vlc");
    var newState = 0;

    if( vlc )
    {
        newState = vlc.input.state;
    }

    if( prevState != newState )
    {
        if( newState == 0 )
        {
            // current media has stopped
            onEnd();
        }
        else if( newState == 1 )
        {
            // current media is openning/connecting
            onOpen();
        }
        else if( newState == 2 )
        {
            // current media is buffering data
            onBuffer();
        }
        else if( newState == 3 )
        {
            // current media is now playing
            onPlay();
        }
        else if( newState == 4 )
        {
            // current media is now paused
            onPause();
        }
        else if( newState == 5 )
        {
            // current media has stopped
                onStop();
        }
        else if( newState == 6 )
        {
            // current media has ended
            onEnd();
        }
        else if( newState == 7 )
        {
            // current media encountered error
            onError();
        }
        prevState = newState;
    }
    else if( newState == 3 )
    {
        // current media is playing
        onPlaying();
    }
    if( monitorTimerId == 0 )
    {
        monitorTimerId = setInterval("monitor()", 1000);
    }
};

/* actions */

function doGo(targetURL)
{
    var vlc = getVLC("vlc");

    if( vlc )
    {
        vlc.playlist.items.clear();
        while( vlc.playlist.items.count > 0 )
        {
            // clear() may return before the playlist has actually been cleared
            // just wait for it to finish its job
        }
        var options = [":rtsp-tcp"];
        var itemId = vlc.playlist.add(targetURL,"",options);
        options = [];
        if( itemId != -1 )
        {
            // play MRL
            vlc.playlist.playItem(itemId);
            if( monitorTimerId == 0 )
            {
                monitor();
            }
        }
        else
        {
            alert("cannot play at the moment !");
        }
        doItemCount();
    }
}

function doAdd(targetURL)
{
    var vlc = getVLC("vlc");
    var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
    if( vlc )
    {
        vlc.playlist.add(targetURL, "", options);
        options = [];
        doItemCount();
    }
}

function doPlayOrPause()
{
    var vlc = getVLC("vlc");
    if( vlc )
    {
        if( vlc.playlist.isPlaying )
        {
            vlc.playlist.togglePause();
            monitor();
        }
        else if( vlc.playlist.items.count > 0 )
        {
            vlc.playlist.play();
            monitor();
        }
        else
        {
            alert('nothing to play !');
        }
    }
}

function doStop()
{
    var vlc = getVLC("vlc");

    if( vlc )
        vlc.playlist.stop();

    if( monitorTimerId != 0 )
    {
        clearInterval(monitorTimerId);
        monitorTimerId = 0;
    }
    onStop();
}

function doPlaySlower()
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = vlc.input.rate / 2;
}

function doPlayFaster()
{
    var vlc = getVLC("vlc");
    if( vlc )
        vlc.input.rate = vlc.input.rate * 2;
}

/* events */

function onOpen()
{
    document.getElementById("state").innerHTML = "Opening...";
    document.getElementById("PlayOrPause").value = "Pause";
}

function onBuffer()
{
    document.getElementById("state").innerHTML = "Buffering...";
    document.getElementById("PlayOrPause").value = "Pause";
}

function onPlay()
{
    document.getElementById("state").innerHTML = "Playing...";
    document.getElementById("PlayOrPause").value = "Pause";
    onPlaying();
}

function onEnd()
{
    document.getElementById("state").innerHTML = "End...";
    doStop();
}

var liveFeedText = ["Live", "((Live))", "(( Live ))", "((  Live  ))"];
var liveFeedRoll = 0;

function onPlaying()
{
    if( !inputTrackerScrolling )
    {
        var vlc = getVLC("vlc");
        var info = document.getElementById("info");
        if( vlc )
        {
            var mediaLen = vlc.input.length;
            inputTrackerIgnoreChange = true;
            if( mediaLen > 0 )
            {
                // seekable media
                if( inputTracker )
                {
                    if( inputTracker.maxVal == 1.0 )
                    {
                        inputTracker.setDisabled(false);
                        inputTracker.maxVal = 1.0;
                    }
                    inputTracker.setValue(vlc.input.position);
                }
                info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(mediaLen);
            }
            else
            {
                // non-seekable "live" media
                if( inputTracker )
                {
                    if( inputTracker.maxVal != 0.0 )
                    {
                        inputTracker.maxVal = 0.0;
                        inputTracker.setValue(0.0);
                        inputTracker.setDisabled(true);
                    }
                }
                liveFeedRoll = liveFeedRoll & 3;
                info.innerHTML = liveFeedText[liveFeedRoll++];
            }
            inputTrackerIgnoreChange  = false;
        }
    }
}

function onPause()
{
    document.getElementById("state").innerHTML = "Paused...";
    document.getElementById("PlayOrPause").value = " Play ";
}

function onStop()
{
    var vlc = getVLC("vlc");

    if( inputTracker )
    {
        if( !inputTracker.disabled )
        {
            inputTracker.setValue(inputTracker.minVal);
            inputTracker.setDisabled(true);
        }
    }

    document.getElementById("info").innerHTML = "-:--:--/-:--:--";
    document.getElementById("state").innerHTML = "Stopped...";
    document.getElementById("PlayOrPause").value = " Play ";
}

function onError()
{
    var vlc = getVLC("vlc");

    document.getElementById("state").innerHTML = "Error...";
}

function onInputTrackerScrollStart()
{
    inputTrackerScrolling = true;
}

function onInputTrackerScrollEnd(inputTracker, value, pos)
{
    inputTrackerScrolling = false;
}

function onInputTrackerChange(inputTracker, value, pos)
{
    if( !inputTrackerIgnoreChange )
    {
        var vlc = getVLC("vlc");
        if( vlc )
        {
            if( (vlc.input.state == 3) && (vlc.input.position != value) )
            {
                var info = document.getElementById("info");
                vlc.input.position = value;
                info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(vlc.input.length);
            }
        }
    }
}

//-->
</SCRIPT>
</BODY>
</HTML>
